/**
 * 进度条类组件-手动触发页面展示
 * @author SPY
 * @date 2020/01/06
 */

import React from 'react';
import { Card, Row, Col, Button } from 'antd';
import moment from 'moment';
import TextProgress from './components/TextProgress';

class ProgressPage extends React.Component {

    state = {
        showStatus: true,  // 用于不断切换进度条动画
        percent: 0, // 初始进度条百分比
        status: 'active', // 激活状态
        showText: ' ',
        isFirstEntry: false, // 是否自第一次进入render,在自动触发中使用
        expireTime: null,

        timer: null,
    }

    // 手动触发函数
    triggerProgress = (status) => {
        this.setState({
            expireTime: moment().add(15, 's').format('YYYY-MM-DD HH:mm:ss'),
            showText: '文件正在下载中...',
            status: 'active',
        }, () => {
            if (status !== 'fail') {
                // status 为 undefined
                const timer = setInterval(() => {
                    const { percent, showStatus, expireTime } = this.state;
                    // 为了展示效果：假设在进度条执行15s后自动进入完成状态,实际开发中是通过后端接口判断
                    if (moment().isAfter(expireTime) || percent >= 100) {
                        // 15s以后
                        this.setState({ percent: 100, status: 'success', showText: '下载完成' }, () => {
                            window.clearInterval(timer); // 清除定时器
                            return;
                        });
                    } else {
                        this.setState({
                            showStatus: !showStatus,
                            percent: parseInt(Math.random() * 8) + percent,
                            timer,
                        });
                    }
                }, 3000);
            } else {
                const { percent, timer } = this.state;

                this.setState({ percent, status: 'exception', showText: '暂停下载' }, () => {
                    window.clearInterval(timer); // 清除定时器
                    return;
                });
            }
        });


    }

    // 手动停止函数
    stopProgress = () => {
        this.triggerProgress('fail');
    }

    render() {
        const { showStatus, status, percent, showText } = this.state;

        return (
            <Card>
                <Row gutter={24}>
                    <Col span={24}>
                        <Card
                            type='inner'
                            title='模拟下载进度条--手动触发'
                            style={{ borderTop: '1px solid #e8e8e8', marginTop: '2%', textAlign: 'center' }}
                            size='small'
                        >
                            <TextProgress
                                showStatus={showStatus}
                                status={status}
                                percent={percent}
                                showText={showText}
                            />
                            <Button type='primary' style={{ marginRight: '1%' }} onClick={this.triggerProgress}>触发</Button>
                            <Button type='danger' onClick={this.stopProgress}>停止</Button>
                        </Card>
                    </Col>

                </Row>
            </Card>
        );
    }
}

export default ProgressPage;